<head>
<style type="text/css">
.hidden{
	display: none;
}
table.display tbody td
{
	word-break: break-all !important;
	word-wrap: break-word !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	-ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
	-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
	white-space: normal !important;
	vertical-align: middle !important;
}

#box-table-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	text-align: center;
	border-collapse: collapse;
	border-top: 7px solid #71A9D3;
	border-bottom: 7px solid #71A9D3;
}
#box-table-b th
{
	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #e8edff;
	border-right: 1px solid #71A9D3;
	border-left: 1px solid #71A9D3;
	color: #039;
}
#box-table-b td
{
	padding: 8px;
	background: #e8edff; 
	border-right: 1px solid #71A9D3;
	border-left: 1px solid #71A9D3;
	color: #669;
}
</style>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<script type="text/javascript">
		var aJaxURL	= "server-side/report/analiz_user.action.php";		//server side folder url
		var tName	= "example";										//table name
		var fName	= "add-edit-form";		
		

		$(document).ready(function () {		
			var ch_user = $("#ch_user").val();	
			LoadTable(ch_user);
			getData(ch_user);
			getData1(ch_user);
			getData2(ch_user);
		});
		
		function LoadTable(ch_user){			
			var total=[2,4,6];			
			GetDataTable(tName, aJaxURL, "get_list&ch_user="+ch_user, 8, "", 0, "", 1, "desc", total);
		}

		$(document).on("change", "#ch_user", function () {
			ch_user = $("#ch_user").val();
			LoadTable(ch_user);
			getData(ch_user);
			getData1(ch_user);
			getData2(ch_user);
		});

		function getData(ch_user){

			var options = {
			        chart: {
			            renderTo: 'chart_container2',
			            margin: [ 50, 50, 100, 80]
			        },
			        title: {
			            text: 'დასრულებული ზარი ოპერატორების მიხედვით',
			            x: -20 
			        },
			       
			        xAxis: {
			            categories: [],
			            labels: {
			                rotation: -45,
			                style: {
			                    fontSize: '13px',
			                    fontFamily: 'Verdana, sans-serif'
			                }
			            }
			        },
			        yAxis: {
			            title: {
			                text: 'ზარები'
			            },
			            plotLines: [{
			                value: 0,
			                width: 1,
			                color: '#808080'
			            }]
			        },
			        tooltip: {
			        	
			                
			        },
			        legend: {
		                layout: 'vertical',
		                align: 'left',
		                verticalAlign: 'top',
		                borderWidth: 0
			        },
			        series: []
			    }
						   

			    $.getJSON("server-side/report/analiz_user.action.php?act=chart1&ch_user="+ch_user, function(json) {
				    
			    	options.xAxis.categories = json[0]['agent'];
			    	options.tooltip.valueSuffix = json[0]['unit'];
			    	options.series[0] = {};
			    	options.series[0].name = json[0]['name'];
			    	options.series[0].data = json[0]['call_count'];
			    	options.series[0].type = "column";
			    	
			        chart = new Highcharts.Chart(options);
			        
			    });
			 
			    
		}
		function getData1(ch_user){

			var options = {
			        chart: {
			            renderTo: 'chart_container1',
			            margin: [ 50, 50, 100, 80]
			        },
			        title: {
			            text: 'სულ ზარი ოპერატორების მიხედვით',
			            x: -20 
			        },
			       
			        xAxis: {
			            categories: [],
			            labels: {
			                rotation: -45,
			                style: {
			                    fontSize: '13px',
			                    fontFamily: 'Verdana, sans-serif'
			                }
			            }
			        },
			        yAxis: {
			            title: {
			                text: 'ზარები'
			            },
			            plotLines: [{
			                value: 0,
			                width: 1,
			                color: '#808080'
			            }]
			        },
			        tooltip: {
			        	
			                
			        },
			        legend: {
		                layout: 'vertical',
		                align: 'left',
		                verticalAlign: 'top',
		                borderWidth: 0
			        },
			        series: []
			    }
						   

			    $.getJSON("server-side/report/analiz_user.action.php?act=chart&ch_user="+ch_user, function(json) {
				    
			    	options.xAxis.categories = json[0]['agent'];
			    	options.tooltip.valueSuffix = json[0]['unit'];
			    	options.series[0] = {};
			    	options.series[0].name = json[0]['name'];
			    	options.series[0].data = json[0]['call_count'];
			    	options.series[0].type = "column";
			    	
			        chart = new Highcharts.Chart(options);
			        
			    });
			 
			    
		}
		function getData2(ch_user){

			var options = {
			        chart: {
			            renderTo: 'chart_container3',
			            margin: [ 50, 50, 100, 80]
			        },
			        title: {
			            text: 'მიზნობრივი ზარი ოპერატორების მიხედვით',
			            x: -20 
			        },
			       
			        xAxis: {
			            categories: [],
			            labels: {
			                rotation: -45,
			                style: {
			                    fontSize: '13px',
			                    fontFamily: 'Verdana, sans-serif'
			                }
			            }
			        },
			        yAxis: {
			            title: {
			                text: 'ზარები'
			            },
			            plotLines: [{
			                value: 0,
			                width: 1,
			                color: '#808080'
			            }]
			        },
			        tooltip: {
			        	
			                
			        },
			        legend: {
		                layout: 'vertical',
		                align: 'left',
		                verticalAlign: 'top',
		                borderWidth: 0
			        },
			        series: []
			    }
						   

			    $.getJSON("server-side/report/analiz_user.action.php?act=chart2&ch_user="+ch_user, function(json) {
				    
			    	options.xAxis.categories = json[0]['agent'];
			    	options.tooltip.valueSuffix = json[0]['unit'];
			    	options.series[0] = {};
			    	options.series[0].name = json[0]['name'];
			    	options.series[0].data = json[0]['call_count'];
			    	options.series[0].type = "column";
			    	
			        chart = new Highcharts.Chart(options);
			        
			    });
			 
			    
		}
    </script>
</head>

<body>
    <div style="width: 90%; margin: auto;">
            	<h2 align="center" >საერთო ანალიზი</h2>
            	<div id="button_area" style="margin-top: 50px;">
            		<div class="right" style="">
            		  <select id="ch_user">
                		  <option value="39">თამუნა დარჩია (204)</option>
                          <option value="40">შორენა დარჩია (205)</option>
                          <option value="41">მაკა ჩარკვიანი (206)</option>
                          <option value="45">ეკა ნატროშვილი (207)</option>
                          <option value="46">ნინო კანდელაკი (208)</option>
                          <option value="44">თეა ხიზამბარელი (209)</option>
                          <option value="47">ეთერ ჭიჭინაძე (210)</option>          		      
            		  </select>
	                </div>
            	</div>
            	
                <table class="display" id="example" style="width: 100%;">
                    <thead>
                        <tr id="datatable_header">
                            <th>ID</th>
                            <th style="width: 100%;">თარიღი</th>
                            <th style="width: 100%;">სულ ზარი</th>
                            <th style="width: 100%;">სულ ზარი %</th>
                            <th style="width: 100%;">დასრულებული</th>
                            <th style="width: 100%;">დასრულებული %</th>
                            <th style="width: 100%;">მიზნობრივი</th>    
                            <th style="width: 100%;">მიზნობრივი %</th>  
                        </tr>
                    </thead>
                    <thead>
                        <tr class="search_header">
                            <th class="colum_hidden">
                            	<input type="text" name="search_id" value="ფილტრი" class="search_init" style=""/>
                            </th>
                            <th>
                            	<input style="width: 120px;" type="text" name="search_number" value="ფილტრი" class="search_init" style=""></th>
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>    
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>    
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>    
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>  
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>  
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>  
                            <th>
                                <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 120px;"/>
                            </th>   
                        </tr>
                    </thead>
                    <tfoot>
                        <tr id="datatable_header" class="search_header">
							<th style="width: 150px"></th>							
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
							<th style="width: 150px"></th>
                        </tr>
                     </tfoot>
                </table>
                <div id="chart_container1" style="float:left; width: 100%; height: 400px;"></div>   
                <div id="chart_container2" style="float:left; width: 50%; height: 400px;"></div> 
                <div id="chart_container3" style="float:left; width: 50%; height: 400px;"></div> 
	            
	</div>  


    <!-- jQuery Dialog -->
    <div  id="add-edit-form" class="form-dialog" title="შემომავალი ზარი">
	</div>

	<!-- jQuery Dialog -->
	<div id="last_calls" title="ბოლო ზარები">
	</div>
	
	<!-- jQuery Dialog -->
	<div id="read_more_dialog" class="form-dialog" title="ყველა გაყიდვა">
	</div>
</body>